<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
		<!--模式识别-->
		<meta name="format-detection" content="telephone=no">
		<!--CSS重置-->
		<link rel="stylesheet" href="css/reset.css">
		<style type="text/css">
			html{
				width: 100%;
				height: 100%;
				overflow-x: hidden;
			}

			body{
				text-align: left;
				width: 100%;
				overflow: hidden;
				background-color: #e9dfc7;
			}

			.m-read-content{
				font-size: 14px;
				color: #555555;
				line-height: 31px;
				padding: 15px;
			}
			.m-read-content h4{
				font-size: 20px;
				color: #736357;
				border-bottom: 1px solid #736357;
				letter-spacing: 2px;
				margin: 0 0 1em 0;
			}

			.m-read-content p{
				text-indent: 2em;
				margin: .5em 0;
				letter-spacing: 0px;
				line-height: 24px;
			}
			.m-btn-bar{
				width: 70%;
				max-width: 800px;
				padding: 5px;
				margin: 0 auto;
			}
			.u-tab{
				height:34px;
				margin: 0 auto;
				line-height: 34px;
				border-radius: 8px;
				border: 1px solid #858382;
				font-size: 12px;
				background-color: #000000;
				opacity: .9;
			}
			.u-tab li{
				display: inline-block;
				width: 49%;
				text-align: center;
			}

			.u-tab li:first-child{
				border-right: 1px solid #858382;
			}

			.top-nav{
				position: fixed;
				top: 0;
				height: 50px;
				width: 100%;
				z-index: 3;
				background-color: rgba(0,0,0,.9);
			}

			.icon-back{
				position: absolute;
				top: 14px;
				left: 10px;
				width: 23px;
				height: 23px;
				background: url();
				background-size: contain;
			}
			.nav-title{
				position: absolute;
				top: 16px;
				left: 42px;
				color: #d5d5d6;
			}

			.bottom-nav{
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 70px;
				box-sizing: border-box;
				padding: 10px 0 10px 0;
				background-color: rgba(0,0,0,.9);
				color: #ffffff;
			}
			.bottom-nav ul{
				font-size: 0;
			}

			.bottom-nav li{
				display: inline-block;
				width: 33.3%;
				text-align: center;
				font-size: 14px;
			}
			.bottom-nav span{
				margin: 0 auto;
				display: block;
				margin-bottom: 10px;
			}
			.icon-dir{
				width: 20px;
				height: 14px;
				background: url();
				background-size: contain;
			}
			.icon-font{
				width: 20px;
				height: 14px;
				background: url();
				background-size: contain;
			}
			.icon-night{
				width: 18px;
				height: 18px;
				background: url();
				background-size: contain;
			}

			.nav-panel-bg{
				position: fixed;
				bottom: 70px;
				height: 135px;
				width: 100%;
				background-color: rgba(0,0,0,.9);
				z-index: 4;
			}
			.nav-panel{
				position: fixed;
				bottom: 70px;
				height: 135px;
				background: none;
				color: #ffffff;
				z-index: 5;
			}

			.child-mod{
				padding: 5px 10px;
				margin: 15px;
			}
			.mod-title{
				display: inline-block;
				padding: 0 10px 0 20px;
			}

			.btn-font{
				display: inline-block;
				border: 1px solid #8c8c8c;
				color: #ffffff;
				border-radius: 15px;
				padding: 5px 40px;
			}

			.bg-container{
				position: relative;
				display: inline-block;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: #ffffff;
				vertical-align: -10px;
				margin-right: 5px;
			}

			.bg-container-current{
				position: absolute;
				top:-2px;
				left: -2px;
				display: inline-block;
				width: 32px;
				height: 32px;
				border-radius: 50%;
				border:1px solid #ff7800;
			}

			.article-action-mid{
				position: fixed;
				z-index: 20;
				width: 100%;
				height: 40%;
				top:30%
			}
		</style>
	</head>
	<body>
		<div id="root" class="container">
			<div class="m-article-action">
				<div class="article-action-mid" id="action_mid"></div>
			</div>
			<div id="top_nav" class="top-nav" style="display: none">
				<div class="icon-back"></div>
				<div class="nav-title">返回书架</div>
			</div>
			<div id="fiction_chapter_title" class=""></div>
			<div id="fiction_container" class="m-read-content">
				<h4>初入前端</h4>
				<p>回忆起来最早接触移动端开发还是在2010年，当时很幸运一毕业就莫名其妙的加入腾讯的Qzone团队,在当时看来这是整个公司前端力量最集中的一个团队。在这里看到的和学到远远要大于自己当时亲自做的事。因为对于刚毕业的学生，在一个优秀的团队里，说实话通常也只会做一些打杂的工作。但是在腾讯的大环境里，学习的机会是无处不在的， 在这里我也遇到了职业生涯的第一个前端导师－石玉磊，现在QQ音乐的总监。回忆起来最早接触移动端开发还是在2010年，当时很幸运一毕业就莫名其妙的加入腾讯的Qzone团队,在当时看来这是整个公司前端力量最集中的一个团队。在这里看到的和学到远远要大于自己当时亲自做的事。因为对于刚毕业的学生，在一个优秀的团队里，说实话通常也只会做一些打杂的工作。但是在腾讯的大环境里，学习的机会是无处不在的， 在这里我也遇到了职业生涯的第一个前端导师－石玉磊，现在QQ音乐的总监。回忆起来最早接触移动端开发还是在2010年，当时很幸运一毕业就莫名其妙的加入腾讯的Qzone团队,在当时看来这是整个公司前端力量最集中的一个团队。在这里看到的和学到远远要大于自己当时亲自做的事。因为对于刚毕业的学生，在一个优秀的团队里，说实话通常也只会做一些打杂的工作。但是在腾讯的大环境里，学习的机会是无处不在的， 在这里我也遇到了职业生涯的第一个前端导师－石玉磊，现在QQ音乐的总监。
				</p>
				<p>回忆起来最早接触移动端开发还是在2010年，当时很幸运一毕业就莫名其妙的加入腾讯的Qzone团队,在当时看来这是整个公司前端力量最集中的一个团队。在这里看到的和学到远远要大于自己当时亲自做的事。因为对于刚毕业的学生，在一个优秀的团队里，说实话通常也只会做一些打杂的工作。但是在腾讯的大环境里，学习的机会是无处不在的， 在这里我也遇到了职业生涯的第一个前端导师－石玉磊，现在QQ音乐的总监。回忆起来最早接触移动端开发还是在2010年，当时很幸运一毕业就莫名其妙的加入腾讯的Qzone团队,在当时看来这是整个公司前端力量最集中的一个团队。在这里看到的和学到远远要大于自己当时亲自做的事。因为对于刚毕业的学生，在一个优秀的团队里，说实话通常也只会做一些打杂的工作。但是在腾讯的大环境里，学习的机会是无处不在的， 在这里我也遇到了职业生涯的第一个前端导师－石玉磊，现在QQ音乐的总监。</p>
				<p>回忆起来最早接触移动端开发还是在2010年，当时很幸运一毕业就莫名其妙的加入腾讯的Qzone团队,在当时看来这是整个公司前端力量最集中的一个团队。在这里看到的和学到远远要大于自己当时亲自做的事。因为对于刚毕业的学生，在一个优秀的团队里，说实话通常也只会做一些打杂的工作。但是在腾讯的大环境里，学习的机会是无处不在的， 在这里我也遇到了职业生涯的第一个前端导师－石玉磊，现在QQ音乐的总监。</p>
			</div>
			<div class="m-btn-bar">
				<ul class="u-tab">
					<li id="btn_prev">上一章</li>
					<li id="btn_next">下一章</li>
				</ul>
			</div>
			<div class="nav-panel-bg font-container" style="display: none"></div>
			<div id="font_container" class="nav-panel font-container" style="display: none">
				<div class="child-mod">
					<span class="mod-title">字号</span>
					<span id="btn_lg" class="btn-font">大</span>
					<span id="btn_sm" class="btn-font">小</span>
				</div>
				<div class="child-mod">
					<span class="mod-title">背景</span>
					<div class="bg-container">
						<div class="bg-container-current"></div>
					</div>

					<div class="bg-container">
						<div class="bg-container-current"></div>
					</div>

					<div class="bg-container">
						<div class="bg-container-current"></div>
					</div>

					<div class="bg-container">
						<div class="bg-container-current"></div>
					</div>

					<div class="bg-container">
						<div class="bg-container-current"></div>
					</div>
				</div>
			</div>
			<div class="bottom-nav" style="display: none">
				<ul>
					<li id="dir-btn"><span class="icon-dir"></span>目录</li>
					<li id="font-btn"><span class="icon-font"></span>字体</li>
					<li id="night-btn"><span class="icon-night"></span>夜间</li>
				</ul>
			</div>
		</div>
		<script src="lib/zepto.min.js"></script>
		<script>
			window.jQuery = $;
		</script>
		<script src="js/jquery.base64.js"></script>
		<script src="js/jquery.jsonp.js"></script>

		<script>
			// 封装localstorage
			(function () {
				var Util = (function () {
				    var prefix = 'html_render_';
					var StorgeGetter = function (key) {
						return localStorage.getItem(prefix+key);
                    };
                    var StorageSetter = function (key,val) {
	                    return localStorage.setItem(prefix+key,val)
                    };

                    return {
                        StorgeGetter : StorgeGetter,
                        StorageSetter :StorageSetter
                    }
                })()
            })();
			
			var Dom = {
			    top_nav:$('#top_nav'),
                bottom_nav:$('.bottom-nav'),
				font_container:$('.font_container')
			}

			var Win = $(window);
			var Doc = $(document);

			function  main() {
				//整个项目的入口函数
                EventHandler();
            }

			//渲染模型
			function ReaderModel() {
				// 实现和阅读器相关的数据交互的方法
            }

            function ReaderBaseFrame() {
			    //渲染基本的UI结构
            }

            function EventHandler() {
				//交互事件绑定
				$('#action_mid').click(function () {
					if(Dom.top_nav.css('display') === 'none'){
					    Dom.bottom_nav.show();
					    Dom.top_nav.show();
					}else{
					    Dom.bottom_nav.hide();
					    Dom.top_nav.hide();
					}
                });
				Win.scroll(function () {
                    Dom.bottom_nav.hide();
                    Dom.top_nav.hide();
                })

                $('#night-btn').click(function () {
				// 出发背景切换的事件
                });

				$('#font-btn').click(function () {
					if(Dom.font_container.css('display')==='none'){
                        Dom.font_container.show();
					}else{
                        Dom.font_container.hide();
					}
                });

				$('#dir-btn').click(function () {

                });
            }
			main();
		</script>
	</body>
</html>